﻿<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" >
        <title>HTML5表单新增输入类型Date Pickers的应用</title>
        <style>
            form {
                width: 280px;
                margin: 20px;
            }
        </style>
    </head>
    <body>
        <h3>HTML5表单新增输入类型Date Pickers的应用</h3>
        <hr />
        <form method="post" action="URL">
            <fieldset>
                <legend>
                    显示日期和时间
                </legend>
                <label>本地：
                    <input type="datetime-local" name="date3" />
                </label>
            </fieldset>
            <br />
            <fieldset>
                <legend>
                    只显示时间
                </legend>
                <label>时间：
                    <input type="time" name="date1" />
                </label>
            </fieldset>
            <br />
            <fieldset>
                <legend>
                    只显示日期
                </legend>
                <label>日期：
                    <input type="date" name="date1" />
                </label>
            </fieldset>
            <br />
            <fieldset>
                <legend>
                    显示年份和月份
                </legend>
                <label>月份：
                    <input type="month" name="date5" />
                </label>
            </fieldset>
            <br />
            <fieldset>
                <legend>
                    显示年份和第几周
                </legend>
                <label>星期：
                    <input type="week" name="date4" />
                </label>
            </fieldset>
        </form>
    </body>
</html>
